<template>
  <div :style="styleName">
    <!-- <pre>{{ isShowProgress }}</pre> -->
    <!-- {{ avater }} -->
    <el-upload
      ref="upload"
      :action="serverUrl"
      :data="TokenQiNiu"
      :before-upload="handleUploadBefore"
      :http-request="handleUploadFile"
      :on-progress="handleProgress"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      :on-remove="handleRemove"
      :show-file-list="false"
    >
      <el-button size="small">
        <i class="el-icon-upload2"></i>
        添加/上传本地文件
      </el-button>
      <el-progress
        v-show="progress != 100"
        :percentage="progress"
      ></el-progress>
    </el-upload>
  </div>
</template>
<script>
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';
import upload from '@/mixin/upload.vue';

export default {
  name: 'uploadAvater',
  mixins: [upload], //混入
  components: {}, //组件
  props: {}, //集成属性
  data() {
    return {
      fileUploadList: [],
    };
  },
  computed: {
    ...mapState([]),
    styleName: function() {
      let s = {};

      return s;
    },
  },
  methods: {
    ...mapMutations([]),
    test: function() {
      console.log('test');
    },

    handleUploadBefore(file) {
      if (
        !['image/png', 'image/jpeg', 'video/mp4'].includes(file.type)
        // [
        //   'application/msword',
        //   'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        //   'application/vnd.ms-excel',
        //   'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        //   'application/vnd.ms-powerpoint',
        //   'application/vnd.openxmlformats-officedocument.presentationml.presentation',
        //   'application/octet-stream', //dll
        //   'application/x-msdownload', //exe
        //   'application/javascript', //js
        //   'text/javascript', //js
        //   'application/x-vbscript', //vbs
        // ].includes(file.type)
      ) {
        this.$message({
          message: `检测到风险文件类型 ${file.type}，请放弃该文件，重新选择其他文件上传`,
          type: 'error',
        });
        return false;
      }
    },

    // handleUploadFile(elUpload){},
    handleUploadSuccess(response, file, fileList) {
      if (fileList) {
        fileList.forEach(v => {
          this.fileUploadList.push(v);
        });
      }
      if (this._.has(response, 'key')) {
        this.fileUploadList.forEach(v => {
          this.$set(v, 'url', `${this.qiniuAddress}/${response.key}`);
        });

        // 通知事件：上传成功
        this.$emit('updataFile', this.fileUploadList.slice(-1)[0]);
      }

      // this.$nextTick(() => {
      //   this.fileUploadList.splice(0, this.fileUploadList.length);
      // });

      // console.log(response);
      // console.log(file);
      // console.log(fileList);
      // console.log(this.fileUploadList);
    }, // 上传成功
    handleUploadError(err) {
      console.log(
        '%c [ err ]-113',
        'font-size:13px; background:pink; color:#bf2c9f;',
        err,
      );
      this.$message.error(`视频上传失败`);
      return;
    },
  },
};
</script>
<style lang="less" scoped></style>
